<template>
  <div>
    <section class="form">
      <el-card>
        <el-form
          ref="form"
          :model="formParams"
          :rules="rules"
          label-width="180px"
        >
          <el-form-item label="海康服务器IP" prop="hikIscIp">
            <el-input
              placeholder="海康服务器IP"
              v-model="formParams.hikIscIp"
            ></el-input>
          </el-form-item>
          <el-form-item label="海康API调用KEY" prop="hikKey">
            <el-input
              placeholder="海康API调用KEY"
              v-model="formParams.hikKey"
            ></el-input>
          </el-form-item>
          <el-form-item label="海康API调用SECRET" prop="hikSecret">
            <el-input
              placeholder="海康API调用SECRET"
              v-model="formParams.hikSecret"
            ></el-input>
          </el-form-item>
          <el-form-item label="网站名称" prop="siteName">
            <el-input
              placeholder="网站名称"
              v-model="formParams.siteName"
            ></el-input>
          </el-form-item>
          <el-form-item label="海康单点登录跳转url" prop="ssoUrl">
            <el-input
              placeholder="海康单点登录跳转url"
              v-model="formParams.ssoUrl"
            ></el-input>
          </el-form-item>
          <el-form-item label="海康单点登录用户名称" prop="ssoUsername">
            <el-input
              placeholder="海康单点登录用户名称"
              v-model="formParams.ssoUsername"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              size="default"
              @click="save"
            >
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { settingGetInfo, settingUpdate } from '@/api/system/setting'
import { ElMessage } from 'element-plus'

const defaultForm = {
  id: '',
  hikIscIp: '', // 海康服务器IP
  hikKey: '', // 海康API调用KEY
  hikSecret: '', // 海康API调用SECRET
  siteName: '', // 网站名称
  ssoUrl: '', // 海康单点登录跳转url
  ssoUsername: '', // 海康单点登录用户名称
}
let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  hikIscIp: [{ required: true, message: '请输入', trigger: 'blur' }],
  hikKey: [{ required: true, message: '请输入', trigger: 'blur' }],
  hikSecret: [{ required: true, message: '请输入', trigger: 'blur' }],
  siteName: [{ required: true, message: '请输入', trigger: 'blur' }],
  ssoUrl: [{ required: true, message: '请输入', trigger: 'blur' }],
  ssoUsername: [{ required: true, message: '请输入', trigger: 'blur' }],
}

onMounted(async () => {
  let { data, status } = await settingGetInfo()
  if (status == 200) {
    Object.keys(formParams).forEach((key) => {
      formParams[key] = data[key]
    })
  }
})

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  let result = await settingUpdate(formParams)
  loading.value = false
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
</script>

<style scoped>
.form {
  width: 40%;
}
</style>
